import React, { useEffect, useState } from 'react';
import './Home.less';
import { Layout, Menu } from 'antd';
import { firstMenuApi, otherMenuApi } from '@/api/login';
import { history } from 'umi';

const { Header, Content, Sider } = Layout;
const { SubMenu } = Menu;

export default function (props) {
  const [collapsed, setCollapsed] = useState(false);
  const [firstMenuArr, setFirstMenuArr] = useState([]); // 一级菜单
  const [otherMenuArr, setOtherMenuArr] = useState([]); // 二级菜单

  useEffect(() => {
    suClick();
  }, []);
  const suClick = async () => {
    const res = await firstMenuApi();
    // console.log(res.data.data)
    if (res.data.code == 200) {
      setFirstMenuArr(res.data.data);
      let parentId = res.data.data[0].menuId;
      const res1 = await otherMenuApi({ parentId });
      // console.log(res1)
      setOtherMenuArr(res1.data.data);
    }
  };

  const onCollapse = (collapsed) => {
    // console.log(collapsed)
    setCollapsed(collapsed);
  };
  function handleMenu(e) {
    // console.log(e)
    let pathname = otherMenuArr.filter((item) => item.menuId == e.key)[0]
      .menuUrl;
    history.push({
      pathname: '/home' + pathname,
    });
  }

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div className="home-list">勤学后台管理</div>
        <Menu
          theme="dark"
          defaultSelectedKeys={['1']}
          mode="inline"
          onClick={handleMenu}
        >
          {firstMenuArr.map((item, index) => {
            return (
              <SubMenu key={item.menuId} title={item.menuName}>
                {otherMenuArr.map((otherItme, otherIndex) => {
                  return (
                    <Menu.Item key={otherItme.menuId}>
                      {otherItme.menuName}
                    </Menu.Item>
                  );
                })}
              </SubMenu>
            );
          })}
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }} />
        <Content>
          {/* style={{ margin: '0 16px' }} */}
          <div>{props.children}</div>
        </Content>
      </Layout>
    </Layout>
  );
}
